<template>
	<view class="logmian" v-if="!isshow">
		<!-- #ifdef H5 -->
		<svg class="icon" aria-hidden="true">
			<use xlink:href="#icon-pingguo"></use>
		</svg>
		<!-- #endif -->
		<view class="area-inputs">
			<view class="myname">
				<i class="iconfont icon-31wode"></i>
				<input
					class="nameput"
					type="text"
					placeholder="邮箱"
					v-model="email"
				/>
			</view>
			<view class="mypwd">
				<i class="iconfont icon-icon-test26"></i>
				<input
					:type="hidePwd ? 'password' : 'text'"
					style="border: 0;outline: none; background-color: rgba(0, 0, 0, 0);"
					placeholder="密码"
					v-model="password"
				/>
				<view @click="hidePwd = !hidePwd">
					<i
						class="mypwdicon"
						:class="
							hidePwd
								? 'iconfont icon-icon-test1'
								: 'iconfont icon-icon-test'
						"
					></i>
				</view>
			</view>
			<view @tap="loginFn" class="cksub">登录</view>
			<view class="ckbtm">
				<view></view>
				<view @tap="isshow = !isshow">立即注册</view>
			</view>
		</view>
	</view>
	<logon v-else @emitsublogon="emitsublogon"></logon>
</template>
<script setup>
import { getUserInfo, getUserdata } from '@/http/api.js';
import { useStore } from 'vuex'; // 引入useStore 方法
import logon from './logon.vue';
import {
	reactive,
	toRefs,
	ref,
	onMounted,
	getCurrentInstance
} from 'vue';
const store = useStore(); // 该方法用于返回store 实例
let hidePwd = ref(true);
let isshow = ref(false);
const data = reactive({
	email: '',
	password: '',
	ruleemail: /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$/, //邮箱
	rulepassword: /^[0-9a-zA-Z]{6,16}$/
});
let { password, email, ruleemail, rulepassword } = toRefs(data);
const loginFn = () => {
	if (!ruleemail.value.test(email.value)) {
		showToast('格式');
	} else if (!rulepassword.value.test(password.value)) {
		showToast('密码应该为6-16位');
	} else {
		const logindata = {
			email: email.value,
			password: password.value
		};
		getUserInfo(logindata).then(res => {
			console.log(res);
			
				store.commit('userInfo', res.access_token);
				getUserdata().then(res => {
					console.log(res);
				if(res?.status_code == 401) return 	uni.showToast({
					title: '账号密码不正确',
				});
				uni.showToast({
					title: '登录成功',
				});
				store.commit('myuser', res);
				const router = uni.getStorageSync('originRoute');
				if (
					router == 'pages/home/home' ||
					'pages/cate/cate' ||
					'pages/cart/cart' ||
					'pages/my/my'
				) {
					console.log(router);
					uni.switchTab({
						url: `/${router}`
					});
				} else {
					console.log(222);
					uni.redirectTo({
						url: `/${router}`
					});
				}
				});
		});
	}
};
/* 提示框 */
let showToast = (title = '', icon = 'none', duration = 1500) => {
	uni.showToast({
		title,
		icon,
		duration,
		position: 'center',
		mask: true
	});
};
const emitsublogon = () => {
	console.log(121);
	isshow.value = !isshow.value;
};
</script>
<style lang="scss" scoped>
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #666;
	font-size: 16px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	color: #666;
	font-size: 16px;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	color: #666;
	font-size: 16px;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	color: #666;
	font-size: 16px;
}
.logmian {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #aaa;
	height: 100vh;
	.icon {
		position: absolute;
		transform: translate(0, -200%);
		width: 400px;
		height: 100px;
	}
	.area-inputs {
		// width: 280px;
		.myname {
			display: flex;
			align-items: center;
			background-color: red;
			height: 50px;
			border-radius: 90px;
			margin-bottom: 10px;
			background-color: white;
			i {
				padding: 20px;
			}
			.nameput {
				flex: 1;
				padding-right: 50px;
			}
		}
		.mypwd {
			height: 50px;
			background-color: red;
			display: flex;
			align-items: center;
			border-radius: 90px;
			margin-bottom: 10px;
			background-color: white;
			i {
				padding: 20px;
			}
		}
	}
	.cksub {
		height: 50px;
		border-radius: 90px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: red;
		color: white;
		margin-bottom: 10px;
	}
	.ckbtm {
		display: flex;
		justify-content: space-between;
		padding-right: 10px;
	}
}
</style>
